<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=or4cWdqg6OXlnp5t0mOjNHAp"></script>
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div id="top">
		<div class="search">
			<label class="div_label">百度地图 </label> <input type="text"
				id="suggestId" class="txt" value="百度" /> <input value="百度一下"
				type="submit" class="input_btn" id="sub" onmousedown="a()"
				onmouseup="b()" />
		</div>
		<div id="searchResultPanel"
			style="border: 1px solid #C0C0C0; width: 150px; height: auto; display: none;"></div>
	</div>
	<div id="bottom">
		<div id="left">
		<br/><br/>
			<div style="text-align: center; margin: 10px">
				<input type="button" class="button orange" value="显示路线"
					style="vertical-align: middle" onclick="showLine()" />
			</div>
			<br/><br/>
			<div style="text-align: center;margin-top: 10px"><a href="/WiFiLoc/mac.html">品牌统计</a></div>
		</div>
		<div id="allmap" style="height: 100%"></div>

	</div>
</body>
</html>
<script type="text/javascript">	

    function a() {
//     document.getElementById('sub').style.background = 'azure';
        $('#sub').attr('style', 'background: darkgrey')

    }
    function b() {
        document.getElementById('sub').style.background = 'url(http://webmap1.map.bdstatic.com/newmap_test/static/common/images/index_a2f1ac4.png) no-repeat -200px -162px';
    }
    // 百度地图API功能，初始化地图
    var map = new BMap.Map("allmap");     
    
    //108.987628, 34.256631   116.331398,39.897445
    //西安交通大学： 108.9901661, 34.252275
    var point = new BMap.Point(108.9901661, 34.252275);
    map.centerAndZoom(point, 17);
    <!--利用滚轮放大与缩小，或者双击放大-->
    map.enableScrollWheelZoom();    
   
    var geoc = new BMap.Geocoder();

    <!--鼠标监听事件，用来添加标注-->
    //    map.addEventListener("click", function (e) {
    //        var pt = e.point;
    //        var marker = new BMap.Marker(new BMap.Point(108.987628, 34.256631));
    //        map.addOverlay(marker);
    //    });
    <!--鼠标拾取坐标-->
    map.addEventListener("click", function (e) {
        // alert(e.point.lng + "," + e.point.lat);
    });

    <!--利用IP定位-->
    //    function myFun(result) {
    //        var cityName = result.name;
    //        map.setCenter(cityName);
    ////        alert("当前定位城市:"+cityName);
    //    }
    //    var myCity = new BMap.LocalCity();
    //    myCity.get(myFun);


    <!--鼠标右键事件-->
    var polylinePointsArray = [];
    var showLine = function () {
        $.ajax({
            cache: true,
            type: "POST",
            url: "IndexServlet",
            dataType: "json",
            error: function (request) {
                alert("Connection error!");
            },
            success: function (data) {
                // alert("success")
                $.each(data, function (index, point) {
                    polylinePointsArray[index] = new BMap.Point(
                            Number(point['lon']), Number(point['lat']));
                    index = index + 1;
                });
                var polyline = new BMap.Polyline(polylinePointsArray,
                        {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
                map.addOverlay(polyline);   //增加折线
            }
        });

    }
    var markerMenu = new BMap.ContextMenu();
    markerMenu.addItem(new BMap.MenuItem('显示轨迹', showLine.bind(marker1)));

    <!--添加新的图标-->

    //设置图片文件
    var myIcon = new BMap.Icon("image/wifi.jpg", new BMap.Size(44, 44));
    //依次创建三个AP图标
    var ap1 = new BMap.Point(108.98863, 34.25602);
    var marker1 = new BMap.Marker(ap1, {icon: myIcon})
    map.addOverlay(marker1);
    marker1.addContextMenu(markerMenu);
    map.panTo(ap1);   //平缓添加
    var ap2 = new BMap.Point(108.988639, 34.253991);
    var marker2 = new BMap.Marker(ap2, {icon: myIcon});
    map.addOverlay(marker2);
    map.panTo(ap2);
    var ap3 = new BMap.Point(108.988675, 34.251604);
    var marker3 = new BMap.Marker(ap3, {icon: myIcon});
    map.addOverlay(marker3);
    map.panTo(ap3)
    ;

    //    var marker2 = new BMap.Marker(pt, {icon: myIcon});  // 创建标注


    //    //单击获取点击的经纬度
    //    map.addEventListener("dbclick",function(e){
    //        alert(e.point.lng + "," + e.point.lat);
    //    });


    //
    <!--添加地图比例尺-->
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    //  var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
    //        缩放控件type有四种类型:
    //         BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮

    //添加控件和比例尺
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    // map.addControl(top_right_navigation);
</script>
<script type="text/javascript" src="js/search.js"></script>
